<template>

  <el-dialog
    top="20px"
    :title="defaultValue.title"
    :visible="tableConfig.show"
    @close="tableConfig.show = false"
    :show-close="tableConfig.showClose"
    :destroy-on-close="tableConfig.destroyOnClose"
    width="1100px">


    <el-row :gutter="10">
      <el-col :span="4">
        <el-image v-if="formMemberFamily.icoPath != null"
                  fit="contain"
                  :src="formMemberFamily.icoPath"></el-image>
        <el-image v-else
                  fit="contain"
                  :src="require('@/assets/images/avatar/avatar11.png')"></el-image>
      </el-col>

      <el-col :span="20">
        <el-descriptions :contentStyle="CS" :label-style="LS" title="" :column="2" :size="size" >
          <el-descriptions-item label="真实姓名">
            <span v-if="formMemberFamily.userName === 'UNKNOWN_NAME_DEFAULT'" style="color: darkorange">未知姓名</span>
            <span v-else>{{formMemberFamily.userName}}</span>
          </el-descriptions-item>
          <el-descriptions-item label="性别">
            <span v-if="formMemberFamily.sex === 0"><el-tag type="success" :size="mini">女</el-tag></span>
            <span v-else-if="formMemberFamily.sex === 1"><el-tag :size="mini">男</el-tag></span>
            <span v-else>未知</span>
          </el-descriptions-item>
          <el-descriptions-item label="外号/昵称">{{formMemberFamily.nickname}}</el-descriptions-item>
          <el-descriptions-item label="手机号码">{{formMemberFamily.phone}}</el-descriptions-item>
          <el-descriptions-item label="身份证">{{formMemberFamily.idCard}}</el-descriptions-item>
          <el-descriptions-item label="出生年月类型">
            <span v-if="formMemberFamily.lunarCalendar === 1"><el-tag type="info" :size="mini">阴历</el-tag></span>
            <span v-else-if="formMemberFamily.lunarCalendar === 2"><el-tag type="danger" :size="mini">阳历</el-tag></span>
            <span v-else>-</span>
          </el-descriptions-item>
          <el-descriptions-item label="出生年月">{{formMemberFamily.birth}}</el-descriptions-item>
          <el-descriptions-item label="生日时间">{{formMemberFamily.birthdayTime}}</el-descriptions-item>
          <el-descriptions-item label="生日提醒时间">
            提前
            <span v-if="formMemberFamily.beforeBirthday" >{{formMemberFamily.beforeBirthday}}</span>
            <span v-else >0</span>
            天
          </el-descriptions-item>
          <el-descriptions-item label="生日提醒">
            <span v-if="formMemberFamily.birthdayTips === 1"><el-tag type="info" :size="mini">未开启</el-tag></span>
            <span v-else-if="formMemberFamily.birthdayTips === 2"><el-tag type="success" :size="mini">开启</el-tag></span>
            <span v-else>-</span>
          </el-descriptions-item>
        </el-descriptions>
      </el-col>
    </el-row>

    <el-row style="margin-top: 10px">
      <el-col :span="24">
        <el-descriptions :contentStyle="CS" :label-style="LS" class="margin-top" title="" :column="2" :size="size" border>

          <el-descriptions-item><template slot="label">公司名称</template>{{formMemberFamily.companyName}}</el-descriptions-item>
          <el-descriptions-item><template slot="label">公司地址</template>{{formMemberFamily.companyAddress}}</el-descriptions-item>
          <el-descriptions-item><template slot="label">职业</template>{{formMemberFamily.occupation}}</el-descriptions-item>
          <el-descriptions-item><template slot="label">工作行业</template>{{formMemberFamily.trade}}</el-descriptions-item>
          <el-descriptions-item><template slot="label">车牌</template>{{formMemberFamily.licensePlate}}</el-descriptions-item>
          <el-descriptions-item><template slot="label">最高学历毕业学校</template>{{formMemberFamily.graduationSchool}}</el-descriptions-item>
          <el-descriptions-item><template slot="label">健康情况</template>{{formMemberFamily.health}}</el-descriptions-item>
          <el-descriptions-item><template slot="label">学历</template>{{formMemberFamily.education}}</el-descriptions-item>
          <el-descriptions-item><template slot="label">结婚时间</template>{{formMemberFamily.marryTime}}</el-descriptions-item>
          <el-descriptions-item><template slot="label">离世时间</template>{{getFullDate(formMemberFamily.deathTime)}}</el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-alarm-clock"></i>
              数据录入时间
            </template>
            {{getTime(formMemberFamily.createTime)}}
          </el-descriptions-item>
        </el-descriptions>
      </el-col>
    </el-row>


    <el-row style="margin-top: 10px">
      <el-col :span="24">
        <el-descriptions class="margin-top" title="" direction="vertical" :column="3" :size="size" border>

          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-document"></i>
              外貌特征
            </template>
            {{formMemberFamily.features}}
          </el-descriptions-item>
        </el-descriptions>

      </el-col>
    </el-row>

    <el-row style="">
      <el-col :span="24">
        <el-descriptions class="margin-top" title="" direction="vertical" :column="3" :size="size" border>

          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-document"></i>
              居住地址
            </template>
            {{formMemberFamily.residentialAddress}}
          </el-descriptions-item>
        </el-descriptions>

      </el-col>
    </el-row>

    <el-row style="">
      <el-col :span="24">
        <el-descriptions class="margin-top" title="" direction="vertical" :column="3" :size="size" border>

          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-document"></i>
              老家地址
            </template>
            {{formMemberFamily.residentialAddressHometown}}
          </el-descriptions-item>
        </el-descriptions>

      </el-col>
    </el-row>

    <el-row style="">
      <el-col :span="24">
        <el-descriptions class="margin-top" title="" direction="vertical" :column="3" :size="size" border>

          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-document"></i>
              备注
            </template>
            {{formMemberFamily.remarks}}
          </el-descriptions-item>
        </el-descriptions>

      </el-col>
    </el-row>



    <span slot="footer" class="dialog-footer">
      <el-button plain type="warning" @click="toUpdate">修改</el-button>
      <el-button plain type="primary" @click="tableConfig.show = false">关闭</el-button>
    </span>

  </el-dialog>

</template>

<script>

  import {getFullDate, getFullTime} from "../../utils/utils";

  export default {
    // 普通用户详情,本详情页面不包含关系信息
    name: "UserDetailed",
    data(){
      return {
        // 默认值，进入页面后的值
        defaultValue: {
          // 弹出框标题
          title: '详情',
        },
        // 表格的默认值
        tableConfig: {
          // 关闭时销毁 Dialog 中的元素
          destroyOnClose: true,
          // 弹出框是否打开
          show: false,
          // 是否显示关闭按钮
          showClose: true,
        },
        // 列表的尺寸
        size: 'small',
        // tag的大小
        mini: 'mini',
        // tag 的大小
        tagSize: 'small',
        // 成员信息
        formMemberFamily: {
          id: null,
          userName: null,
          nickname: null,
          features: null,
          phone: null,
          idCard: null,
          sex: null,
          lunarCalendar: null,
          birth: null,
          birthdayTime: null,
          beforeBirthday: null,
          birthdayTips: null,
          icoPath: null,
          occupation: null,
          companyName: null,
          companyAddress: null,
          trade: null,
          graduationSchool: null,
          education: null,
          residentialAddress: null,
          residentialAddressHometown: null,
          marryTime: null,
          deathTime: null,
          tombId: null,
          licensePlate: null,
          remarks: null,
          health: null,
          sort: 99,
          createTime: null,
        },
        // 描述列表的css
        CS: {
          // 'text-align': 'center',  //文本居中
          'min-width': '250px',   //最小宽度
          'word-break': 'break-all'  //过长时自动换行
        },
        // 描述列表的css
        LS: {
          // 'color': '#000',
          // 'text-align': 'center',
          'font-weight': '600',
          // 'height': '40px',
          // 'background-color': 'rgba(255, 97, 2, 0.1)',
          'min-width': '110px',
          'word-break': 'keep-all'
        },
        /**
         * 打开人员信息详情
         * @param obj 人员信息
         */
        openUserDetailed(obj){
          this.formMemberFamily = obj
          this.tableConfig.show = true
        },
      }
    },
    methods: {
      /**
       * 转换时间戳为时间格式
       */
      getTime(item){
        return getFullTime(item)
      },
      /**
       * 时间转日期
       * @param item 要转换的时间戳
       * @return {string}
       */
      getFullDate(item){
        return getFullDate(item)
      },
      /**
       * 跳转到人员信息页面
       */
      toUpdate(){
        let localStorage = window.localStorage;
        let memberFamily = JSON.parse(localStorage.memberFamily);
        if (memberFamily.id === this.formMemberFamily.id){
          // 自身用户因为没有关系信息，需要前往固定的页面
          this.$router.push({path: "/toUserSaveUpd"})

        } else {
          // 跳转到人员信息页面
          this.$router.push({
            name:"toSocialConnectionList",
            // 除了这种方式传参，还可以 params 方式传参，参考：https://blog.csdn.net/sinat_52319736/article/details/127464798
            query: {
              userId: this.formMemberFamily.id,
            }
          })
        }

      },
    },
  }
</script>

<style scoped>

</style>
